<template>
  <div class="cat">
    <van-checkbox-group v-model="result">
      
          <van-checkbox v-for="item in carArr" :key="item.id" :name="item" @click='checkFn'>
            <van-swipe-cell>
              <van-card
              :num="item.number"
              :price="item.market_price"
              :desc="item.goods_specifition_name_value"
              :title="item.goods_name"
              :thumb="item.list_pic_url"
              />
              <template #right>
                <van-button square text="删除" type="danger" class="delete-button" @click="carDel(item.product_id)" />
              </template>
            </van-swipe-cell>
          </van-checkbox>
    </van-checkbox-group>
    <van-submit-bar :price="price" button-text="提交订单" @submit="onSubmit">
      <van-checkbox v-model="checked" @click="checkAll">全选</van-checkbox>
      <template #tip>
        你的收货地址不支持同城送, <span @click="onClickEditAddress">修改地址</span>
      </template>
    </van-submit-bar>
  </div>
</template>

<script>
// 导入axios请求
import  { getCarData,carDel } from "@/https/http";

export default {
  data() {
    return {
      carArr:[],//购物车数组
      result: [],//复选框数组
      checked:false,//全选框状态
      price:0
    }
  },
  methods: {
    // 修改地址
    onClickEditAddress(){},
    // 提交订单
    onSubmit(){},
    // 全选框事件
    checkAll(){
      if(this.checked){
        this.result = this.carArr
        //计算总价格
        this.price = 0
        this.result.map(item=>{
          this.price += item.market_price * item.number * 100
        })
      }else{
        this.result = []
        //计算总价格
        this.price = 0
        this.result.map(item=>{
          this.price += item.market_price * item.number * 100
      })
      }
    },
    // 单选框事件
    checkFn(){
      // 全选框事件
      if(this.result.length == this.carArr.length){
        this.checked = true
        this.price = 0
        this.result.map(item=>{
          this.price += item.market_price * item.number * 100
        })
      }else{
        this.checked = false
        this.price = 0
      }
      //计算总价格
      this.price = 0
      this.result.map(item=>{
        this.price += item.market_price * item.number * 100
      })
    },
    // 购物车删除商品
    carDel(id){
      console.log(id);
      let str = String(id)
      carDel({productIds:str}).then(res=>{
        console.log(res);
        this.carArr = res.data.data.cartList
        console.log(this.carArr);
      })
    }
  },
  mounted(){
    getCarData().then(res=>{
      this.carArr = res.data.data.cartList
      console.log(this.carArr);
    })
  }
}
</script>

<style scoped lang = 'less'>
/deep/.van-checkbox__label {
  flex: 1;
}
.cat {
  padding-bottom: 80px;
  padding: 0px 0 0 10px;
  box-sizing: border-box;
}
/deep/.van-submit-bar {
  bottom: 50px;
}

.delete-button {
  height: 100%;
}
</style>